<template>
  <div id="app">
  <div id="left" class="container">
    <h1>合约信息修改</h1>
    <div class="form-mid-item">
      <label class="form-label" for="eventName">合约创建者</label>
      <select class="form-select">
          <option>小明</option>
          <option>小王</option>
          <option>小红</option>
      </select>
    </div>
    <div class="form-mid-item">
      <label class="form-label" for="eventName">合约归属</label>
      <select class="form-select">
          <option>小明</option>
          <option>小王</option>
          <option>小红</option>
      </select>
    </div>
    <div class="form-item">
      <label class="form-label" for="description">改动原因</label>
      <textarea
        class="form-input"
        id="description"
      ></textarea>
    </div>
    <div class="form-item">
      <label class="form-label" for="description">内容修改</label>
      <textarea
        class="form-input"
        id="description"
        v-model="description"
        rows="5"
      ></textarea>
    </div>
    <div class="form-item">
      <button class="form-button submit-button" @click="submitForm">保存修改</button>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  name: "hyChange",
  data(){
      return  {}
  },
  methods: {}
}
</script>
<style scoped>
.bm-view {
width: 100%;
height: 100%;
margin-top: 0px;
}
#app {
display: flex;
width: 100%;
height: 100%;
}
#left {
left: 0px;
flex: 45%;
height: 100%;
background: url("@/assets/images/guideBg.jpg");
background-size: 110% 110%;
}
#right {
flex: 55%;
height: 100%;
}
/* 页面布局 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.container {
max-width: 70%;
margin: 0 auto;
padding: 20px;
}

/* 表单样式 */
.form-item {
margin-bottom: 20px;
}

.form-mid-item{
width: 50%;
display: inline-block;
}

.form-label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

.form-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}

.form-input[type="checkbox"] {
width: auto;
}

.form-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}

.form-select{
  width: 80%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin: 5px;
}

/* 日期选择器样式 */
.datepicker {
position: relative;
}

.datepicker input {
padding-right: 30px;
}

.datepicker .calendar-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 16px;
color: #999;
cursor: pointer;
}

/* 图片上传样式 */
.upload-container {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}

.upload-item {
width: calc(33.33% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}

.upload-item img {
width: 100%;
height: auto;
border: 1px solid #ccc;
border-radius: 4px;
}

.uploaded-photos-container {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}

.uploaded-photo {
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
}

.uploaded-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid #ccc;
border-radius: 4px;
}

.submit-button {
  width: 50%;
  margin-left: 25%;
  margin-top: 10%;
}
</style>